<template>
  <div>
    <el-form ref="editPram" :model="editPram" label-width="140px">
      <el-form-item
        :label="$t('fenLeiMingCheng')"
        prop="zh"
        :rules="[{ required: true, message: $t('qingShuRuFenLeiMingCheng'), trigger: ['blur', 'change'] }]"
      >
        <el-input
          v-model="editPram.zh"
          :maxlength="biztype.value === 1 ? 100 : 100"
          :placeholder="$t('fenLeiMingCheng')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('enFenLeiMingCheng')"
        prop="en"
        :rules="[{ required: true, message: $t('enQingShuRuFenLeiMingCheng'), trigger: ['blur', 'change'] }]"
      >
        <el-input
          v-model="editPram.en"
          :maxlength="biztype.value === 1 ? 100 : 100"
          :placeholder="$t('fenLeiMingCheng')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('ruFenLeiMingCheng')"
        prop="ru"
        :rules="[{ required: true, message: $t('ruQingShuRuFenLeiMingCheng'), trigger: ['blur', 'change'] }]"
      >
        <el-input
          v-model="editPram.ru"
          :maxlength="biztype.value === 1 ? 100 : 100"
          :placeholder="$t('fenLeiMingCheng')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('kzFenLeiMingCheng')"
        prop="kz"
        :rules="[{ required: true, message: $t('kzQingShuRuFenLeiMingCheng'), trigger: ['blur', 'change'] }]"
      >
        <el-input
          v-model="editPram.kz"
          :maxlength="biztype.value === 1 ? 100 : 100"
          :placeholder="$t('fenLeiMingCheng')"
        />
      </el-form-item>
      <el-form-item :label="$t('fuJi')">
        <el-cascader
          ref="cascader"
          v-model="editPram.pid"
          :disabled="isCreate === 1 && editPram.pid === 0"
          :options="allTreeList"
          :props="categoryProps"
          style="width: 100%"
          @change="change"
        />
      </el-form-item>
      <!--</el-form-item>-->
      <el-form-item v-if="biztype.value === 5" :label="$t('caiDanTuBiao')">
        <el-input v-model="editPram.icon" :placeholder="$t('qingXuanZeCaiDanTuBiao')">
          <el-button slot="append" icon="el-icon-circle-plus-outline" @click="addIcon" />
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('fenLeiTuBiao_180180')">
        <div class="upLoadPicBox" @click="modalPicTap('1')">
          <div v-if="editPram.icon" class="pictrue">
            <img :src="editPram.icon" />
          </div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
      </el-form-item>
      <el-form-item :label="$t('paiXu')">
        <el-input-number v-model="editPram.sort" :min="1" :max="9999" />
      </el-form-item>
      <!--<el-form-item label="状态">-->
      <!--<el-switch v-model="editPram.status"  active-text="显示"-->
      <!--inactive-text="隐藏" :active-value="true" :inactive-value="false" />-->
      <!--</el-form-item>-->
      <el-form-item
        v-if="biztype.value !== 1 && biztype.value !== 3 && biztype.value !== 5"
        :label="$t('kuoZhanZiDuan')"
      >
        <el-input v-model="editPram.extra" type="textarea" :placeholder="$t('kuoZhanZiDuan')" />
      </el-form-item>
      <el-form-item>
        <el-button
          v-hasPermi="['admin:category:update']"
          type="primary"
          :loading="loadingBtn"
          @click="handlerSubmit('editPram')"
          >{{ $t('confirm') }}</el-button
        >
        <el-button @click="close">{{ $t('cancel') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<!--创建和编辑公用一个组件-->
<script>
import * as categoryApi from '@/api/categoryApi.js';
import * as selfUtil from '@/utils/ZBKJIutil.js';
import * as storeApi from '@/api/store.js';
import { isJSON } from '@/utils';
export default {
  // name: "edit"
  props: {
    prent: {
      type: Object,
      required: true,
    },
    isCreate: {
      type: Number,
      default: 0,
    },
    editData: {
      type: Object,
    },
    biztype: {
      type: Object,
      required: true,
    },
    allTreeList: {
      type: Array,
    },
  },
  data() {
    return {
      loadingBtn: false,
      constants: this.$constants,
      editPram: {
        icon: null,
        name: null,
        zh: '',
        en: '',
        ru: '',
        kz: '',
        pid: 0,
        sort: 0,
        id: 0,
      },
      categoryProps: {
        value: 'id',
        label: 'translateName',
        children: 'childList',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false,
      },
      parentOptions: [],
    };
  },
  mounted() {
    this.initEditData();
  },
  methods: {
    change() {
      // this.editPram.level = parseInt(this.$refs['cascader'].getCheckedNodes()[0].level) + 1
    },
    // 点击图标
    addIcon() {
      const _this = this;
      _this.$modalIcon(function (icon) {
        _this.editPram.extra = icon;
      });
    },
    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this;
      const attr = [];
      this.$modalUpload(
        function (img) {
          if (tit === '1' && !num) {
            _this.editPram.icon = img[0].sattDir;
          }
          if (tit === '2' && !num) {
            img.map((item) => {
              attr.push(item.attachment_src);
              _this.formValidate.slider_image.push(item);
            });
          }
        },
        tit,
        'store',
      );
    },
    close() {
      this.$emit('hideEditDialog');
    },
    initEditData() {
      // this.parentOptions = this.changeNodes([...this.allTreeList])
      // this.addTreeListLabelForCasCard(this.parentOptions, 'childList')
      const { icon, name, pid, sort, id } = this.editData;
      if (this.isCreate === 1) {
        this.editPram.icon = icon;
        this.editPram.name = name;
        this.editPram.pid = pid;
        this.editPram.sort = sort;
        this.editPram.id = id;
        if (isJSON(name)) {
          let nameJson = JSON.parse(name);
          this.editPram.zh = nameJson.zh;
          this.editPram.en = nameJson.en;
          this.editPram.ru = nameJson.ru;
          this.editPram.kz = nameJson.kz;
        } else {
          this.editPram.zh = name;
        }
      } else {
        this.editPram.pid = this.prent.id;
      }
    },
    handlerSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return;
        this.handlerSaveOrUpdate(this.isCreate === 0);
      });
    },
    handlerSaveOrUpdate(isSave) {
      let params = { ...this.editPram };
      params.name = JSON.stringify({
        zh: this.editPram.zh,
        en: this.editPram.en,
        ru: this.editPram.ru,
        kz: this.editPram.kz,
      });
      if (isSave) {
        this.loadingBtn = true;
        storeApi
          .productCategoryAddApi(params)
          .then((data) => {
            this.$emit('hideEditDialog');
            this.$message.success(this.$t('chuangJianMuLuChengGong'));
            this.$store.commit('product/SET_MerProductClassify', []);
            this.loadingBtn = false;
          })
          .catch(() => {
            this.loadingBtn = false;
          });
      } else {
        this.loadingBtn = true;
        storeApi
          .productCategoryUpdateApi(params)
          .then((data) => {
            this.$emit('hideEditDialog');
            this.$message.success(this.$t('gengXinMuLuChengGong'));
            this.$store.commit('product/SET_MerProductClassify', []);
            this.loadingBtn = false;
          })
          .catch(() => {
            this.loadingBtn = false;
          });
      }
    },
  },
};
</script>

<style scoped></style>
